<script setup lang="ts"></script>

<template>
  <div class="footer">
    <div class="footer-box">
      <div class="footer-box-box">
        <div class="footer-left">
          <div>
            <div class="footer-tit">主办单位:</div>
            <div>中国国际商会</div>
            <div>厦门市贸促会</div>
          </div>
          <div>
            <div class="footer-tit">承办单位：</div>
            <div>厦门国际商会</div>
          </div>
          <div>
            <div class="footer-tit">支持单位：</div>
            <div>商务部外贸发展事务局</div>
            <div>中国国际贸易促进委员会贸易推广交流中心</div>
            <div>世界贸易中心协会</div>
            <div>欧盟中国委员会</div>
            <div>RCEP产业合作委员会</div>
            <div>中国服务贸易协会</div>
            <div>中国出入境检验检疫协会</div>
            <div>泉州市人民政府</div>
            <div>福建省亚太经济贸易合作促进会</div>
            <div>励展华博展览（深圳）有限公司</div>
          </div>
          <div>
            <div class="footer-tit">合作单位：</div>
            <div>广东省跨境电子商务协会</div>
            <div>河北省跨境电子商务协会</div>
            <div>山西省跨境电子商务协会</div>
            <div>云南省跨境电子商务协会</div>
            <div>深圳市跨境电子商务协会</div>
            <div>佛山市跨境电子商务协会</div>
            <div>临沂市跨境电子商务协会</div>
            <div>海口市跨境电商协会</div>
            <div>温州家具商会</div>
            <div>福建省家具协会</div>
            <div>杭州市服装行业协会</div>
            <div>深圳电子行业协会</div>
          </div>
        </div>
        <div class="footer-right">
          <div class="footer-code">
            <img src="@/assets/images/footer1.png" alt="" />
            <div>小程序</div>
          </div>
          <div class="footer-code">
            <img src="@/assets/images/footer2.png" alt="" />
            <div>公众号</div>
          </div>
          <div class="footer-code">
            <img src="@/assets/images/douyin.jpg" alt="" />
            <div>抖音</div>
          </div>
        </div>
      </div>
      <div class="bor"></div>
      <div class="footer-text">
        <div class="text-left">
          <span>
            <a
              href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg2NjUzMjc2Mw==&action=getalbum&album_id=2883559164252536832&scene=126#wechat_redirect"
              target="_blank"
              >新闻中心</a
            >
          </span>
          |
          <span>
            <a href="/content/官网-联系我们0?type=0">联系我们</a>
          </span>
          | <span><a href="/">版权声明</a></span> |
          <span><a href="/">隐私保护</a></span> |
          <span><a href="/">友情链接</a></span>
        </div>
        <div class="text-right">
          <span
            >Copyright©️ 2012-2022
            <a href="http://www.iceie.cn/" target="_blank">iceie.cn</a
            >版权所有</span
          >
          <span
            ><a href="https://beian.miit.gov.cn/" target="_blank"
              >闽ICP备2021004410号-1</a
            ></span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.footer {
  background-color: rgba(51, 51, 51);
  padding: 2.813vw 0;
}

.footer .footer-box {
  width: 82%;
  margin: 0 auto;
}

.footer .footer-box-box {
  display: flex;
  justify-content: space-between;
}

.footer-box .footer-left {
  width: 65%;
  display: flex;
  justify-content: space-between;
  margin-right: 5%;
}

.footer-box .footer-left > div {
  width: 24%;
}

.footer-right {
  flex: 1;
  display: flex;
  text-align: center;
}

.footer-code {
  width: 33.33%;
}

.footer-tit {
  margin-bottom: 1.25vw;
}

.footer,
.footer a {
  color: #cccccc;
}

.footer .bor {
  border-top: 1px solid #ccc;
  margin: 1.042vw 0;
}

.footer .footer-text {
  display: flex;
  justify-content: space-between;
}

.text-right span {
  margin-left: 1.042vw;
}

.web {
  display: block;
}

.mobiel {
  display: none;
}

.footer-right > div img {
  width: 7vw;
}

.xieban {
  width: 50% !important;
  text-align: center;
  padding: 0 10px;
}

.xieban-box {
  display: flex;
  text-align: left;
  justify-content: space-evenly;
}
@media (max-width: 768px) {
  .footer {
    padding: 4vw 0;
  }

  .review-swiper,
  .review-swiper2 {
    height: 36.8vw;
  }

  .footer .footer-box {
    width: 90%;
  }

  .footer .footer-box-box {
    display: block;
  }

  .footer-box .footer-left {
    width: 100%;
    margin-right: 0;
    display: block;
  }

  .footer-tit {
    margin-bottom: 0;
  }

  .footer-left > div {
    margin-bottom: 2vw;
  }

  .footer-box .footer-left > div {
    width: 100%;
  }

  .footer .footer-text {
    display: block;
  }

  .text-left {
    margin-bottom: 2vw;
  }

  .text-right span {
    display: block;
    text-align: center;
    margin-bottom: 1.333vw;
  }

  .footer-right > div img {
    width: 10.267vw;
  }
}
</style>
